<template>
	<view>
		<image class="image-item" mode="aspectFill" src="https://img-qn-2.51miz.com/preview/muban/00/00/67/01/M-670197-2D6C69C5.jpg"></image>
		<view class="form-box">
			<view class="form-box-name">
				<text>姓名</text><input class="uni-input" v-model="name" focus placeholder="请输入姓名"/>
			</view>
			<view class="form-box-phone">
				<text>电话</text><input type="tel" class="uni-input" v-model="phone" placeholder="请输入电话"/>
			</view>
			<view class="form-box-button">
				<button type="default" @click="addRedWineAddPerson">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {addPerson} from '@/api/record/person.js'
	export default {
		data() {
			return {
				name:'',
				phone:''
			}
		},
		methods: {
			addRedWineAddPerson(){
				if(this.name=='' || this.phone == ''){
					uni.showToast({
						title:"姓名和电话不能为空！",
						icon:"none",
						duration:2000
					})
					return;
				}
				if(this.phone.length != 11){
					uni.showToast({
						title:"请填写正确的手机号码，手机号码是11位！",
						icon:"none",
						duration:2000
					})
				}
				addPerson({
					personType:"redwineadperson",
					name:this.name,
					phoneNumber:this.phone
				}).then(response => {
					if(response.code == 200){
						uni.showToast({
							title:"提交成功！",
							icon:"success",
							duration:2000
						})
					}else{
						uni.showToast({
							title:"提交失败！",
							icon:"error",
							duration:2000
						})
					}
				});
			}
		}
	}
</script>

<style>
	.image-item{
		width: 100%;
		height: 1000px;
	}
	uni-view.form-box {
	    display: block;
	    position: absolute;
	    top: 430px;
	    left: 89px;
	    color: white;
	}
	
	uni-view.form-box-name {
	    display: flex;
	}
	
	uni-view.form-box-phone {
	    display: flex;
	    margin-top: 9px;
	}
	
	uni-input.uni-input {
	    font-size: 14px;
	    border: dashed white 1px;
	    width: 100px;
	    margin-left: 15px;
	    padding-left: 6px;
	}
	
	uni-view.form-box-button {
	    margin-top: 10px;
	}
	
	uni-button {
	    height: 29px;
	    line-height: 29px;
	    font-size: 14px;
	    background-color: #ab2038 !important;
	    color: white;
	}
</style>
